<template>
  <div style="height: 670px; overflow: auto">
    <div>
      <div class="titleclass">
        <div class="benclass" :class="titleRef == '本设备资料' ? 'actioncal' : ''" @click="benactionFun">本设备资料</div>
        <div class="gonclass" :class="titleRef == '共享资料' ? 'actioncal' : ''" @click="gonactionFun">共享资料</div>
      </div>
    </div>
    <div v-if="titleRef == '本设备资料'" class="mainclass">
      <div class="onediv">
        <div class="titleclass">
          <div class="benclass" :class="oneRef == '工程日志' ? 'actioncal' : ''" @click="engineeringLogFun">工程日志</div>
          <div class="gonclass" :class="oneRef == '工程评定表' ? 'actioncal' : ''" @click="engineeringFormFun">工程评定表</div>
        </div>
        <div v-if="oneRef == '工程日志'" class="disclass">
          <div v-if="onefileList1.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="onefileList1[0].fileId != '0'"
              @click="returnFun('onefileList1', '工程日志')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.onefileList1">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('onefileList1', '工程日志')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in onefileList1"
              :key="index"
              @dblclick="getFolderFun(item, '工程日志', 'onefileList1')"
              @click="selectFileFun(item, 'onefileList1')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('工程日志', 'onefileList1')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="oneonChange1"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('工程日志', 'onefileList1')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('工程日志', 'onefileList1')">下载</el-button>
          </div>
        </div>
        <div v-if="oneRef == '工程评定表'" class="disclass">
          <div v-if="onefileList2.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="onefileList2[0].fileId != '0'"
              @click="returnFun('onefileList2', '工程评定表')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.onefileList2">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('onefileList2', '工程评定表')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in onefileList2"
              :key="index"
              @dblclick="getFolderFun(item, '工程评定表', 'onefileList2')"
              @click="selectFileFun(item, 'onefileList2')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('工程评定表', 'onefileList2')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="oneonChange2"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('工程评定表', 'onefileList2')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('工程评定表', 'onefileList2')">下载</el-button>
          </div>
        </div>
      </div>
      <div class="twodiv">
        <div class="titleclass">
          <div class="benclass" :class="twoRef == '竣工图纸' ? 'actioncal' : ''" @click="beCompletedFun">竣工图纸</div>
          <div class="gonclass" :class="twoRef == '材料出场合格证' ? 'actioncal' : ''" @click="materialFun">材料出场合格证</div>
        </div>
        <div v-if="twoRef == '竣工图纸'" class="disclass">
          <div v-if="twofileList1.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="twofileList1[0].fileId != '0'"
              @click="returnFun('twofileList1', '竣工图纸')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.twofileList1">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('twofileList1', '竣工图纸')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in twofileList1"
              :key="index"
              @dblclick="getFolderFun(item, '竣工图纸', 'twofileList1')"
              @click="selectFileFun(item, 'twofileList1')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('竣工图纸', 'twofileList1')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="twoonChange1"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('竣工图纸', 'twofileList1')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('竣工图纸', 'twofileList1')">下载</el-button>
          </div>
        </div>
        <div v-if="twoRef == '材料出场合格证'" class="disclass">
          <div v-if="twofileList2.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="twofileList2[0].fileId != '0'"
              @click="returnFun('twofileList2', '材料出场合格证')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.twofileList2">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('twofileList2', '材料出场合格证')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in twofileList2"
              :key="index"
              @dblclick="getFolderFun(item, '材料出场合格证', 'twofileList2')"
              @click="selectFileFun(item, 'twofileList2')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('材料出场合格证', 'twofileList2')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="twoonChange2"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('材料出场合格证', 'twofileList2')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('材料出场合格证', 'twofileList2')">下载</el-button>
          </div>
        </div>
      </div>
      <div class="threediv">
        <div class="titleclass">
          <div class="benclass" :class="threeRef == '测试报告' ? 'actioncal' : ''" @click="testFun">测试报告</div>
          <div class="gonclass" :class="threeRef == '声像档案' ? 'actioncal' : ''" @click="soundImageFun">声像档案</div>
        </div>
        <div v-if="threeRef == '测试报告'" class="disclass">
          <div v-if="threefileList1.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="threefileList1[0].fileId != '0'"
              @click="returnFun('threefileList1', '测试报告')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.threefileList1">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('threefileList1', '测试报告')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in threefileList1"
              :key="index"
              @dblclick="getFolderFun(item, '测试报告', 'threefileList1')"
              @click="selectFileFun(item, 'threefileList1')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('测试报告', 'threefileList1')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="threeonChange1"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('测试报告', 'threefileList1')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('测试报告', 'threefileList1')">下载</el-button>
          </div>
        </div>
        <div v-if="threeRef == '声像档案'" class="disclass">
          <div v-if="threefileList2.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="threefileList2[0].fileId != '0'"
              @click="returnFun('threefileList2', '声像档案')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.threefileList2">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('threefileList2', '声像档案')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in threefileList2"
              :key="index"
              @dblclick="getFolderFun(item, '声像档案', 'threefileList2')"
              @click="selectFileFun(item, 'threefileList2')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('声像档案', 'threefileList2')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="threeonChange2"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('声像档案', 'threefileList2')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('声像档案', 'threefileList2')">下载</el-button>
          </div>
        </div>
      </div>
      <div class="fourdiv">
        <div class="titleclass">
          <div class="benclass" :class="fourRef == '项目建设前期文件' ? 'actioncal' : ''" @click="projectProphaseFun">项目建设前期文件</div>
          <div class="gonclass" :class="fourRef == '其他' ? 'actioncal' : ''" @click="otherFun">其他</div>
        </div>
        <div v-if="fourRef == '项目建设前期文件'" class="disclass">
          <div v-if="fourfileList1.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="fourfileList1[0].fileId != '0'"
              @click="returnFun('fourfileList1', '项目建设前期文件')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.fourfileList1">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('fourfileList1', '项目建设前期文件')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in fourfileList1"
              :key="index"
              @dblclick="getFolderFun(item, '项目建设前期文件', 'fourfileList1')"
              @click="selectFileFun(item, 'fourfileList1')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('项目建设前期文件', 'fourfileList1')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="fouronChange1"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('项目建设前期文件', 'fourfileList1')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('项目建设前期文件', 'fourfileList1')">下载</el-button>
          </div>
        </div>
        <div v-if="fourRef == '其他'" class="disclass">
          <div v-if="fourfileList2.length != '0'">
            <el-icon
              class="ArrowLeftBoldcla"
              style="font-size: 20px"
              v-if="fourfileList2[0].fileId != '0'"
              @click="returnFun('fourfileList2', '其他')"
            >
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div v-else-if="eightarrayreturnIsShow.fourfileList2">
            <el-icon class="ArrowLeftBoldcla" style="font-size: 20px" @click="returnFun('fourfileList2', '其他')">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="contentcla">
            <div
              class="fileimgdiv"
              v-for="(item, index) in fourfileList2"
              :key="index"
              @dblclick="getFolderFun(item, '其他', 'fourfileList2')"
              @click="selectFileFun(item, 'fourfileList2')"
            >
              <span class="diaplayraspan" v-if="item.diaplay">
                <el-icon color="#FFF" class="no-inherit">
                  <Select style="margin-top: 6px" />
                </el-icon>
              </span>
              <img :src="item.url" alt="" :class="item.class" />
              <span style="width: 100px">{{ item.datumName }}</span>
            </div>
          </div>
          <div class="contentbut">
            <el-button type="success" plain @click="addFolderFun('其他', 'fourfileList2')">新建分类</el-button>
            <el-upload
              multiple
              name="files"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="fouronChange2"
              class="upload-file-uploader"
              ref="fileUpload"
            >
              <el-button type="success" plain>上传</el-button>
            </el-upload>
            <el-button type="danger" plain @click="handleDelete('其他', 'fourfileList2')">删除</el-button>
            <el-button type="primary" @click="DownloadFun('其他', 'fourfileList2')">下载</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="titleRef == '共享资料'">
      <div class="contentcla1">
        <div class="fileimgdiv" v-for="(item, index) in shareFilefileList" :key="index">
          <span class="diaplayraspan" v-if="item.diaplay">
            <el-icon color="#FFF" class="no-inherit">
              <Select style="margin-top: 6px" />
            </el-icon>
          </span>
          <img :src="item.url" alt="" :class="item.class" />
          <span style="width: 100px">{{ item.datumName }}</span>
        </div>
      </div>
    </div>
  </div>
  <el-dialog title="新建分类" v-model="open" width="400px" append-to-body draggable top="30vh">
    <el-form-item label="分类名称">
      <el-input style="width: 180px" v-model="formName.folderName" placeholder="请输入分类名称" @keyup.enter.native="submitForm" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="means">
// import {
//   selectPrivateDatumAndFolderListapi,
//   deleteManDatumByIdapi,
//   insertManDatumFolderapi,
//   selectShareDatumAndFolderListapi,
// } from "@/api/main/api.js";
import { reactive, ref, toRefs } from "vue";
import excel from "@/assets/images/excel-icon.png";
import word from "@/assets/images/word-icon.png";
import folder from "@/assets/images/folder.png"; //文件夹
import pdf from "@/assets/images/pdf.png";
import MP3 from "@/assets/images/MP3.jpg";
import MP4 from "@/assets/images/MP4.jpg";
import kong from "@/assets/images/kong.jpg";
import txt from "@/assets/images/txt.jpg";
const props = defineProps({
  forma: {
    type: Object,
    default: {},
  },
  parentName: {
    type: String,
    default: "",
  },
});
const open = ref(false);
const { proxy } = getCurrentInstance();
const titleRef = ref("本设备资料");
const oneRef = ref("工程日志");
const twoRef = ref("竣工图纸");
const threeRef = ref("测试报告");
const fourRef = ref("项目建设前期文件");
const watchName = ref("");
const folderObjName = ref("");
const timer = ref(null);
const data = reactive({
  fileTpe: ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf", "png"],
  formName: {
    folderName: "",
  },
  eightarrayparentId: [
    { name: "onefileList1", parentObj: {} },
    { name: "onefileList2", parentObj: {} },
    { name: "twofileList1", parentObj: {} },
    { name: "twofileList2", parentObj: {} },
    { name: "threefileList1", parentObj: {} },
    { name: "threefileList2", parentObj: {} },
    { name: "fourfileList1", parentObj: {} },
    { name: "fourfileList2", parentObj: {} },
  ],
  eightarrayreturnIsShow: {
    onefileList1: false,
    onefileList2: false,
    twofileList1: false,
    twofileList2: false,
    threefileList1: false,
    threefileList2: false,
    fourfileList1: false,
    fourfileList2: false,
  },
  onefileList1: [],
  onefileList2: [],
  twofileList1: [],
  twofileList2: [],
  threefileList1: [],
  threefileList2: [],
  fourfileList1: [],
  fourfileList2: [],
  selectFileList: [],
  selectItem: {},
  queryobj: {
    involveEquipment: props.parentName,
    equipmentId: props.forma.id,
    userId: sessionStorage.getItem("username"),
    contentType: "",
    status: "私有",
    fileId: "0",
    type: "",
  },
  shareFileQueryobj: {
    involveEquipment: props.parentName,
    railwayId: props.forma.railwayId,
    progressTypeId: props.forma.progressTypeId,
    startMileageNumber: props.forma.startMileageNumber,
    endMileageNumber: props.forma.endMileageNumber,
    type: "",
  },
  getItemId: {},
  shareFilefileList: [],
});
const {
  eightarrayreturnIsShow,
  eightarrayparentId,
  shareFilefileList,
  shareFileQueryobj,
  getItemId,
  queryobj,
  formName,
  fileTpe,
  selectItem,
  onefileList1,
  onefileList2,
  twofileList1,
  twofileList2,
  threefileList1,
  threefileList2,
  fourfileList1,
  fourfileList2,
  selectFileList,
} = toRefs(data);

//上传文件改变时
function oneonChange1(file, changeFileList) {
  Changefun(file, "工程日志", "onefileList1");
}
function oneonChange2(file, changeFileList) {
  Changefun(file, "工程评定表", "onefileList2");
}
function twoonChange1(file, changeFileList) {
  Changefun(file, "竣工图纸", "twofileList1");
}
function twoonChange2(file, changeFileList) {
  Changefun(file, "材料出场合格证", "twofileList2");
}
function threeonChange1(file, changeFileList) {
  Changefun(file, "测试报告", "threefileList1");
}
function threeonChange2(file, changeFileList) {
  Changefun(file, "声像档案", "threefileList2");
}
function fouronChange1(file, changeFileList) {
  Changefun(file, "项目建设前期文件", "fourfileList1");
}
function fouronChange2(file, changeFileList) {
  Changefun(file, "其他", "fourfileList2");
}
function Changefun(file, typeName, fListName) {
  // for (let i = 0; i < onefileList1.value.length; i++) {
  //   if (file.name == onefileList1.value[i].datumName) {
  //     proxy.$modal.msgError("请勿上传重复文件");
  //     return false;
  //   }
  // }
  // const fileName = file.name.split(".");
  // const fileExt = fileName[fileName.length - 1];
  // const isTypeOk = fileTpe.value.indexOf(fileExt) >= 0;
  // if (!isTypeOk) {
  //   proxy.$modal.msgError(`文件格式不正确, 请上传${fileTpe.value.join("/")}格式文件!`);
  //   return false;
  // }
  if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
    queryobj.value.type = "正线";
  } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
    queryobj.value.type = "站内";
  }
  let parentOBJList = {};
  let formData = new FormData();
  queryobj.value.contentType = typeName;
  for (let i = 0; i < eightarrayparentId.value.length; i++) {
    if (eightarrayparentId.value[i].name == fListName) {
      queryobj.value.fileId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      parentOBJList = eightarrayparentId.value[i].parentObj;
    }
  }

  formData.append("files", file.raw);
  formData.append("datum", JSON.stringify(queryobj.value));
  // insertPrivateDatumapi(formData).then((res) => {
  //   proxy.$modal.msgSuccess("新增成功");
  //   if (parentOBJList.type == 2) {
  //     getFolderFun(parentOBJList, queryobj.value.contentType, fListName);
  //   } else {
  //     getSelcetList();
  //   }
  // });
}
function forFunList(res) {
  for (let i = 0; i < res.data.length; i++) {
    const fileName = res.data[i].datumName.split(".");
    const fileExt = fileName[fileName.length - 1];
    // ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf", "png","kong"],
    if (fileExt == "doc" || fileExt == "docx") {
      res.data[i].url = word;
    } else if (fileExt == "xls" || fileExt == "xlsx") {
      res.data[i].url = excel;
    } else if (fileExt == "pdf") {
      res.data[i].url = pdf;
    } else if (fileExt == "png" || fileExt == "jpg" || fileExt == "jpeg") {
      res.data[i].url = res.data[i].datumUrl;
    } else if (fileExt == "mp3") {
      res.data[i].url = MP3;
      res.data[i].class = "imgmp";
    } else if (fileExt == "mp4") {
      res.data[i].url = MP4;
      res.data[i].class = "imgmp";
    } else if (fileExt == "txt") {
      res.data[i].url = txt;
      res.data[i].class = "imgtxt";
    } else if (res.data[i].type == 2) {
      res.data[i].url = folder;
    } else {
      res.data[i].url = kong;
      res.data[i].class = "imgmp";
    }
  }
}
//查询全部的文件
const getSelcetList = (row) => {
  // console.log(queryobj.value);
  if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
    queryobj.value.type = "正线";
  } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
    queryobj.value.type = "站内";
  }
  queryobj.value.contentType = "";
  queryobj.value.datumFolderId = "0";
  queryobj.value.parentId = "0";
  queryobj.value.fileId = "0";
  // selectPrivateDatumAndFolderListapi(queryobj.value).then((res) => {
  //   onefileList1.value = [];
  //   onefileList2.value = [];
  //   twofileList1.value = [];
  //   twofileList2.value = [];
  //   threefileList1.value = [];
  //   threefileList2.value = [];
  //   fourfileList1.value = [];
  //   fourfileList2.value = [];
  //   if (res.data.length != 0) {
  //     forFunList(res);
  //     onefileList1.value = res.data.filter((item) => item.contentType == "工程日志");
  //     onefileList2.value = res.data.filter((item) => item.contentType == "工程评定表");
  //     twofileList1.value = res.data.filter((item) => item.contentType == "竣工图纸");
  //     twofileList2.value = res.data.filter((item) => item.contentType == "材料出场合格证");
  //     threefileList1.value = res.data.filter((item) => item.contentType == "测试报告");
  //     threefileList2.value = res.data.filter((item) => item.contentType == "声像档案");
  //     fourfileList1.value = res.data.filter((item) => item.contentType == "项目建设前期文件");
  //     fourfileList2.value = res.data.filter((item) => item.contentType == "其他");
  //   }
  // });
};
getSelcetList();
defineExpose({
  getSelcetList,
});
//新建分类
function addFolderFun(contentnameType, fListName) {
  open.value = true;
  for (let i = 0; i < eightarrayparentId.value.length; i++) {
    if (eightarrayparentId.value[i].name == fListName) {
      eightarrayparentId.value[i].parentObj.fName = fListName;
    }
  }
  folderObjName.value = fListName;
  queryobj.value.contentType = contentnameType;
  formName.value.folderName = "";
}

// 取消按钮
function cancel() {
  open.value = false;
}

/** 双击查询文件夹 */
function getFolderFun(item, contentnameType, fName) {
  console.log(item, contentnameType, fName);
  clearTimeout(timer.value);
  console.log("双击事件");
  if (item.type == 2) {
    if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
      queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
      queryobj.value.type = "正线";
    } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
      queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
      queryobj.value.type = "站内";
    }
    item.fName = fName;
    eightarrayreturnIsShow.value[fName] = true;
    //双击的话选择的得制空
    selectFileList.value = [];
    for (let i = 0; i < eightarrayparentId.value.length; i++) {
      if (eightarrayparentId.value[i].name == fName) {
        eightarrayparentId.value[i].parentObj = item;
        queryobj.value.datumFolderId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
        queryobj.value.parentId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
        queryobj.value.fileId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      }
    }
    getItemId.value = item;
    queryobj.value.contentType = contentnameType;
    // selectPrivateDatumAndFolderListapi(queryobj.value).then((res) => {
    //   data[fName] = [];
    //   // console.log(fName);
    //   // console.log(data[fName]);
    //   if (res.data.length != 0) {
    //     forFunList(res);
    //     for (let i = 0; i < res.data.length; i++) {
    //       data[fName].push(res.data[i]);
    //     }
    //   }
    // });
  }
}
/** 提交按钮 */
function submitForm() {
  if (formName.value.folderName == "") {
    proxy.$modal.msgError("分类名称不能为空");
    return;
  }
  console.log(data[folderObjName.value]);
  for (let i = 0; i < data[folderObjName.value].length; i++) {
    if (data[folderObjName.value][i].datumName == formName.value.folderName) {
      proxy.$modal.msgError("分类名称不能重复");
      return;
    }
  }
  if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
    queryobj.value.type = "正线";
  } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
    queryobj.value.type = "站内";
  }
  queryobj.value.folderName = formName.value.folderName;
  let parentOBJList = {};
  for (let i = 0; i < eightarrayparentId.value.length; i++) {
    if (eightarrayparentId.value[i].name == folderObjName.value) {
      queryobj.value.datumFolderId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      queryobj.value.parentId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      queryobj.value.fileId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      parentOBJList = eightarrayparentId.value[i].parentObj;
    }
  }
  // insertManDatumFolderapi(queryobj.value).then((res) => {
  //   console.log(queryobj.value);
  //   getSingleFun(parentOBJList, queryobj.value.contentType, parentOBJList.fName);
  //   open.value = false;
  // });
}
/** 查询单个模块 */
function getSingleFun(item, contentnameType, fName) {
  if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
    queryobj.value.type = "正线";
  } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
    queryobj.value.type = "站内";
  }
  item.fName = fName;
  for (let i = 0; i < eightarrayparentId.value.length; i++) {
    if (eightarrayparentId.value[i].name == fName) {
      eightarrayparentId.value[i].parentObj = item;
      queryobj.value.datumFolderId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      queryobj.value.parentId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
      queryobj.value.fileId = eightarrayparentId.value[i].parentObj.id == undefined ? "0" : eightarrayparentId.value[i].parentObj.id;
    }
  }
  getItemId.value = item;
  queryobj.value.contentType = contentnameType;
  // selectPrivateDatumAndFolderListapi(queryobj.value).then((res) => {
  //   data[fName] = [];
  //   // console.log(fName);
  //   // console.log(data[fName]);
  //   if (res.data.length != 0) {
  //     forFunList(res);
  //     for (let i = 0; i < res.data.length; i++) {
  //       data[fName].push(res.data[i]);
  //     }
  //   }
  // });
}
/** 删除按钮操作 */
function handleDelete(contentnameType, filesName) {
  console.log(selectFileList.value);
  if (selectFileList.value.length == 0) {
    proxy.$modal.msgError("请选择文件");
    return;
  }
  if (selectFileList.value[0].contentType != contentnameType) {
    proxy.$modal.msgError("请选择文件");
    return;
  }
  let ids = [];
  for (let i = 0; i < selectFileList.value.length; i++) {
    ids.push(selectFileList.value[i].id);
  }
  proxy.$modal
    .confirm("是否确认删除")
    .then(function () {
      // return deleteManDatumByIdapi(ids);
    })
    .then(() => {
      let parentOBJList = {};
      for (let i = 0; i < eightarrayparentId.value.length; i++) {
        if (eightarrayparentId.value[i].name == filesName) {
          parentOBJList = eightarrayparentId.value[i].parentObj;
        }
      }
      getSingleFun(parentOBJList, contentnameType, filesName);
      proxy.$modal.msgSuccess("删除成功");
      selectFileList.value = [];
    })
    .catch(() => {
      selectFileList.value = [];
    });
}
/** 返回按钮 */
function returnFun(filesName, contentTypeName) {
  let parentOBJList = {};
  for (let i = 0; i < eightarrayparentId.value.length; i++) {
    if (eightarrayparentId.value[i].name == filesName) {
      parentOBJList = eightarrayparentId.value[i].parentObj;
    }
  }
  //查询上一级
  returnfunction(parentOBJList, contentTypeName, filesName);
}
//查询上一级
function returnfunction(item, contentnameType, fName) {
  if (queryobj.value.involveEquipment.indexOf("正线") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("正线")[1];
    queryobj.value.type = "正线";
  } else if (queryobj.value.involveEquipment.indexOf("站内") >= 0) {
    queryobj.value.involveEquipment = queryobj.value.involveEquipment.split("站内")[1];
    queryobj.value.type = "站内";
  }
  item.fName = fName;
  if (data[fName].length == 0) {
    for (let i = 0; i < eightarrayparentId.value.length; i++) {
      if (eightarrayparentId.value[i].name == fName) {
        console.log(eightarrayparentId.value[i].parentObj);
        queryobj.value.fileId = eightarrayparentId.value[i].parentObj.fileId == undefined ? "0" : eightarrayparentId.value[i].parentObj.fileId;
        queryobj.value.datumFolderId = eightarrayparentId.value[i].parentObj.fileId == undefined ? "0" : eightarrayparentId.value[i].parentObj.fileId;
        queryobj.value.parentId = eightarrayparentId.value[i].parentObj.fileId == undefined ? "0" : eightarrayparentId.value[i].parentObj.fileId;
      }
    }
  } else {
    queryobj.value.fileId = data[fName][0].parentId;
  }
  getItemId.value = item;
  // queryobj.value.parentId = "0";
  // queryobj.value.datumFolderId = "0";
  queryobj.value.contentType = contentnameType;
  // selectPrivateDatumAndFolderListapi(queryobj.value).then((res) => {
  //   data[fName] = [];
  //   // console.log(fName);
  //   // console.log(data[fName]);
  //   if (res.data.length != 0) {
  //     forFunList(res);
  //     for (let i = 0; i < res.data.length; i++) {
  //       for (let i = 0; i < eightarrayparentId.value.length; i++) {
  //         if (eightarrayparentId.value[i].name == fName) {
  //           eightarrayparentId.value[i].parentObj = JSON.parse(JSON.stringify(res.data[0]));
  //           eightarrayparentId.value[i].parentObj.id = eightarrayparentId.value[i].parentObj.fileId;
  //           eightarrayparentId.value[i].parentObj.fileId = eightarrayparentId.value[i].parentObj.parentId;
  //         }
  //       }
  //       data[fName].push(res.data[i]);
  //     }
  //   }
  // });
}
//选择文件
function selectFileFun(item, fileName) {
  clearTimeout(timer.value);
  timer.value = setTimeout(function () {
    console.log("单击事件"); //单击要执行的事件处理
    watchName.value = fileName;
    item.diaplay = true;
    selectItem.value = item;
    //判断文件有没有，有了的话就删除
    for (let i = 0; i < selectFileList.value.length; i++) {
      if (selectFileList.value[i].id == item.id) {
        selectFileList.value.splice(i, 1);
        item.diaplay = false;
      }
    }
    if (item.diaplay == true) {
      selectFileList.value.push(item);
    }
  }, 300);
}
watch(watchName, (newValue, oldValue) => {
  console.log(newValue, newValue);
  if (oldValue != "") {
    if (newValue != oldValue) {
      for (let i = 0; i < data[oldValue].length; i++) {
        console.log(data[oldValue]);
        data[oldValue][i].diaplay = false;
      }
      selectFileList.value = [];
      selectFileList.value.push(selectItem.value);
    }
  }
});

function benactionFun() {
  titleRef.value = "本设备资料";
}
//共享资料
function gonactionFun() {
  titleRef.value = "共享资料";
  if (shareFileQueryobj.value.involveEquipment.indexOf("正线") >= 0) {
    shareFileQueryobj.value.involveEquipment = shareFileQueryobj.value.involveEquipment.split("正线")[1];
    shareFileQueryobj.value.type = "正线";
  } else if (shareFileQueryobj.value.involveEquipment.indexOf("站内") >= 0) {
    shareFileQueryobj.value.involveEquipment = shareFileQueryobj.value.involveEquipment.split("站内")[1];
    shareFileQueryobj.value.type = "站内";
  }
  shareFileQueryobj.value.status = "共享";
  // selectShareDatumAndFolderListapi(shareFileQueryobj.value).then((res) => {
  //   shareFilefileList.value = [];
  //   forFunList(res);
  //   shareFilefileList.value = res.data;
  // });
}
//下载
function DownloadFun(contentnameType, filesName) {
  console.log(selectFileList.value);
  if (selectFileList.value.length == 0) {
    proxy.$modal.msgError("请选择文件");
    return;
  }
  if (selectFileList.value[0].contentType != contentnameType) {
    proxy.$modal.msgError("请选择文件");
    return;
  }
  // for (let i = 0; i < eightarrayparentId.value.length; i++) {
  //       if (eightarrayparentId.value[i].name == filesName) {
  //         parentOBJList = eightarrayparentId.value[i].parentObj;
  //       }
  //     }
  for (let i = 0; i < selectFileList.value.length; i++) {
    if (selectFileList.value[i].type != 2) {
      proxy.download1("/file/datumFile/downDatumFileById", selectFileList.value[i].id, selectFileList.value[i].datumName);
      // window.open(selectFileList.value[i].datumUrl, "_blank");
      // const elink = document.createElement("a"); // 创建a标签
      // elink.style.display = "none";
      // elink.target = "_blank";
      // elink.download = selectFileList.value[i].datumName;
      // elink.href = selectFileList.value[i].datumUrl;
      // // 创建一个指向blob的url，这里就是点击可以下载文件的根结
      // document.body.appendChild(elink);
      // elink.click();
      // document.body.removeChild(elink); //移除a标签
    }
  }
}
function engineeringLogFun() {
  oneRef.value = "工程日志";
}
function engineeringFormFun() {
  oneRef.value = "工程评定表";
}
function beCompletedFun() {
  twoRef.value = "竣工图纸";
}
function materialFun() {
  twoRef.value = "材料出场合格证";
}
function testFun() {
  threeRef.value = "测试报告";
}
function soundImageFun() {
  threeRef.value = "声像档案";
}
function projectProphaseFun() {
  fourRef.value = "项目建设前期文件";
}
function otherFun() {
  fourRef.value = "其他";
}
</script>

<style scoped lang="scss">
.disclass {
  position: relative;
}
.titleclass {
  display: flex;
  margin-bottom: 6px;
  .benclass {
    width: 310px;
    height: 40px;
    color: #f4f8ff;
    background: #c0cfe6;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
  .gonclass {
    width: 310px;
    height: 40px;
    color: #f4f8ff;
    background: #c0cfe6;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
  .actioncal {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 228, 1);
    color: #409eff;
    background: #fff;
  }
}
.mainclass {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .onediv {
    width: 620px;
    height: 390px;
    border: 1px solid #409eff;
  }
  .twodiv {
    width: 620px;
    height: 390px;
    border: 1px solid #409eff;
  }
  .threediv {
    width: 620px;
    height: 390px;
    border: 1px solid #409eff;
  }
  .fourdiv {
    width: 620px;
    height: 390px;
    border: 1px solid #409eff;
  }
}
.contentcla {
  height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 28px;
}
.contentcla1 {
  height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 28px;
}
.contentbut {
  display: flex;
  justify-content: center;
}
.el-button {
  margin-left: 10px;
}
.diaplayraspan {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background-color: green;
}
.fileimgdiv {
  width: 100px;
  height: 100px;
  // border: 1px solid #409eff;
  margin: 5px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  img {
    width: 83px;
    height: 79px;
    display: block;
  }
  .imgmp {
    width: 47px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 59px;
    display: block;
  }
  .imgtxt {
    width: 51px;
    margin-top: 12px;
    margin-bottom: 12px;
    height: 55px;
    display: block;
  }
  span {
    height: 19px;
    z-index: 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.fileimgdiv:hover {
  span {
    white-space: normal;
    overflow: inherit;
  }
}
.ArrowLeftBoldcla {
  width: 32px;
  height: 30px;
  margin-top: 10px;
  margin-left: 13px;
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  z-index: 100;
}
.ArrowLeftBoldcla:hover {
  background-color: #c0cfe6;
}
</style>
